<template>
  <a-modal :visible="visible" title="添加" :width="700" forceRender ok-text="确认" cancel-text="取消" @ok="onSubmit" @cancel="onClose">
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 6 }">
      <a-form-item label="租户名称" name="name">
        <a-input v-model:value="form.name" placeholder="请输入租户名称" />
      </a-form-item>
      <a-form-item label="详细地址" name="addr">
        <a-input v-model:value="form.addr" placeholder="请输入地址" />
      </a-form-item>
      <a-form-item label="联系人" name="contacts">
        <a-input v-model:value="form.contacts" placeholder="请输入联系人" />
      </a-form-item>
      <a-form-item label="联系人电话" name="telephone">
        <a-input v-model:value="form.telephone" placeholder="请输入联系人电话" />
      </a-form-item>
      <a-form-item label="邮箱" name="email">
        <a-input v-model:value="form.email" placeholder="请输入邮箱" />
      </a-form-item>
      <a-form-item label="租户管理员账号" name="adminAccount">
        <a-input v-model:value="form.adminAccount" placeholder="请输入租户管理员账号" />
      </a-form-item>
      <a-form-item label="备注信息" name="remark">
        <a-textarea v-model:value="form.remark" placeholder="请输入备注信息" :rows="3" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue';
  import _ from 'lodash';
  import { nextTick, reactive, ref } from 'vue';
  import { enterpriseApi } from '/@/api/business/oa/enterprise-api';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { regular } from '/@/constants/regular-const';
  import { smartSentry } from '/@/lib/smart-sentry';

  defineExpose({
    showModal,
  });
  const emit = defineEmits('refresh');

  // --------------------- modal 显示与隐藏 ---------------------
  // 是否展示
  const visible = ref(false);

  function showModal(record) {
    debugger
    if(record)
      Object.assign(form, record);
    else
      Object.assign(form, formDefault);
    visible.value = true;
  }

  function onClose() {
    visible.value = false;
  }

  // --------------------- 表单 ---------------------

  //  组件
  const formRef = ref();

  const formDefault = {
    id: undefined,
    name: undefined,
    addr: undefined,
    contacts: undefined,
    telephone: undefined,
    email: undefined,
    adminAccount: undefined,
    remark: undefined,
  };
  let form = reactive({ ...formDefault });
  const rules = {
    name: [{ required: true, message: '请输入租户名称' }],
    addr: [{ required: true, message: '请输入详细地址' }],
    contacts: [{ required: true, message: '请输入联系人' }],
    adminAccount: [{ required: true, message: '请输入管理员账号' }],
    telephone: [
      { required: true, message: '请输入联系人电话' },
      { pattern: regular.phone, message: '请输入正确的联系人电话', trigger: 'blur' },
    ],
  };

  function onSubmit() {
    formRef.value
      .validate()
      .then(async () => {
        SmartLoading.show();
        try {
          let res=await enterpriseApi.update(form);
          if(res.success){
            message.success(res.message);
            emit('refresh');
            onClose();
          }
          else
            message.error(res.message);
        } catch (error) {
          smartSentry.captureError(error);
        } finally {
          SmartLoading.hide();
        }
      })
      .catch((error) => {
        console.log('error', error);
        message.error('参数验证错误，请仔细填写表单数据!');
      });
  }
</script>

<style lang="less" scoped>
  .form-width {
    width: 100% !important;
  }

  .footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  :deep(.ant-card-body) {
    padding: 10px;
  }
</style>
